<template>
 <!-- 甲供清单 -->
    <div>
        <div class="e-table">
            <div class="top">
                <div class="left" v-if="isAdd">
                    <div>
                        <el-button
                            size="small"
                            type="primary"
                            @click="addEarnestMoney"
                            class="btn-greenYellow"
                            >选择保证金</el-button
                        >
                    </div>
                </div>
                <div class="right">
                    <div class="squarecolor">
                        <div class="color colorAdd"></div>
                        <span>新增</span>
                    </div>
                    <div class="squarecolor item">
                        <div class="color colorUpdate"></div>
                        <span>修改</span>
                    </div>
                    <div class="squarecolor">
                        <div class="color colorDel"></div>
                        <span>删除/过期</span>
                    </div>
                </div>
            </div>
            <div class="errorMsg" v-if="errorMsg.length>0">
                <span >
                    {{ errorMsg.join(',') }}
                </span>
            </div>
            <el-table
                :data="tableData"
                border
                style="width: 100%; margin-bottom: 20px"
                :row-class-name="tableRowClassName"
                class="table"
                :max-height="$store.state.tableHeight"
                ref="tableRef"
                v-sortTable="{ 'tableData': tableData, '_this': this, 'ref': 'tableRef' }"
            >
                <el-table-column fixed label="操作" width="100">
                    <template slot-scope="{ row, $index }">
                        <div class="oparation_box">
                            <i class="el-icon-delete"
                                style="font-size: 24px; color: #e9513e;"
                                v-if="isAdd && row.changeState !== -1"
                                @click="handleDeleteBond(row, $index )"
                                title="删除"
                            ></i>
                            <img src="@/assets/btn/cancelDelete.png" class="cancel_delete"
                            @click="cancelDelete(row)"
                                v-if="isAdd && row.changeState === -1"
                            title="取消删除"
                            />
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="保证金项目名称"
                    min-width="200"
                    align="left"
                >
                    <template slot-scope="{ row }">
                        <span>{{ row.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="deductionRatio"
                    label="扣款比例%"
                    width="400"
                >
                    <template slot-scope="{ row }">
                        <el-input
                            v-model="row.deductionRatio"
                            v-enterInteger2
                            autocomplete="off"
                            @change="changeState(row)"
                            v-if="isEdit"
                        ></el-input>
                        <span v-else>{{ row.deductionRatio + '%' }}</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script>
import { getUnit } from '@/api/subcontractApi/currency.js'
import { mapState } from 'vuex'
import { selectDataClient } from '@/utils/common'
export default {
    props: {
        detailsOfProposed: {
            type: Array,
            default: function () {
                return []
            }
        },
        tenderClass: {
            type: String,
            default: ''
        },
        billid: {
            type: String,
            default: ''
        },
        contractListTable: {
            type: Array,
            default: function () {
                return []
            }
        },
        errorMsg: {
            type: Array,
            default: function () {
                return []
            }
        },
        isBidding: {
            type: Boolean,
            default: false
        },
        mainInfo: {
            type: Object,
            default: function () {
                return {}
            }
        },
        auditState: {
            type: Object,
            default: function () {
                return {
                    canAudit: false,
                    canModify: true,
                    canUndoAudit: false,
                    freeNextUnits: [],
                    isFree: false,
                }
            }
        },
        //是否可以新增
        isAdd: {
            default: true
        },
        //是否可以编辑
        isEdit: {
            default: true
        },
        getTableData: { //获取表格数据接口
            type: Function
        },
        contractTypelist: {}, //合同类型列表
        contractType: {}, //合同类型
    },
    model: {
        prop: 'contractListTable',
        event: 'change'
    },
    computed: {
        tenderId () {
            return this.$route.query.billid
        },
        ...mapState({
            materialList: state => state.contract.ctClassify.materialList,
            supplyType: state => state.contract.ctClassify.supplyTypeList,
            userInfo: state => state.userInfo,
        }),

    },
    watch: {
        contractListTable: {
            handler (newName) {
                this.tableData = newName
            },
            immediate: false,
            deep: true
        },
        tableData: {
            handler (newName) {
                this.$emit('change', newName)
            },
            immediate: true,
            deep: true
        },
    },
    data () {
        return {
            showTable: true,
            tableData: [],
        }
    },
    created () {
        this.getData()
    },
    mounted () {
        getUnit().then(res=>{
            let arr = res.map(x=>{
                let obj = {
                    value: '',
                    label: '',
                }
                obj.value = x.kvValue
                obj.label = x.kvKey
                return obj
            })
            this.unitList = arr
        })
    },
    methods: {
        // 获取列表数据
        getData () {
            this.showTable = false
            this.getTableData({
                sourceId: this.billid,
            }).then(res => {
                res = res.code ? [] : res
                res.map(x=>{
                    x.changeType = 0
                    return x
                })
                this.tableData = res
            })
        },
        tableRowClassName ({ row }) {
            if(row.changeType === -1) {
                return `class-${row.billId} row-hide`
            }else{
                if(row.changeState === 1) {
                    return `class-${row.billId} green row-show`
                }else if(row.changeState === 2) {
                    return `class-${row.billId} yellow row-show`
                }else if(row.changeState === -1) {
                    return `class-${row.billId} red row-show`
                }else{
                    return `class-${row.billId} row-show`
                }
            }
        },

        //选择保证金
        addEarnestMoney () {
            let ids = this.tableData.filter(x=>(x.oriBillId && x.changeType !== -1)).map(x=>x.oriBillId)
            const  InitParamsStr = JSON.stringify(
                { contractCategoryName: this.contractTypelist[this.contractType - 1], orgId: this.userInfo.orgInfo.orgId }
            )
            // 弹窗选择数据
            selectDataClient({
                SelectServiceToken: '/subcontract/basicSettingsBond/getBond', // 客户端对应方法名
                IsSingleMode: false, // 是否单选 true 单选 false 多选
                SelectedIDs: ids, // 已选中id(注意：是上一次已选中的id，不是要传的参数，如果第一次选，则传[])
                InitParamsStr: InitParamsStr,   // 接口参数(name为模拟参数
                Title: '选择保证金' // 标题
            }).then(val => {
                const res = []
                val.forEach(item=>{
                    if(!this.tableData.find(x=>x.oriBillId === item.billId && x.changeState !== -1)) {
                        res.push(item)
                    }
                })
                res.forEach(x=>{
                    const obj =   {
                        'billId': '',
                        'changeType': 1,
                        'changeState': 1,
                        'deductionRatio': x.deductionRatio,
                        'name': x.name,
                        'sourceId': this.billid,
                        'oriBillId': x.billId
                    }
                    this.tableData.push(obj)
                })
            })
        },
        //删除保证金
        handleDeleteBond (row, $index) {
            if (row.changeType !== 1 && row.changeState !== 1) {
                this.clientPop(
                    'info',
                    this.oneDeleteListErr,
                    () => {
                        row.changeType = -2
                        row.changeState = -1
                    }
                )
            }else if(row.changeType !== 1 && row.changeState === 1) {
                this.clientPop(
                    'info',
                    this.oneDeleteListErr,
                    () => {
                        row.changeType = -1
                        row.changeState = -1
                    }
                )
            }
            else {
                this.tableData.splice($index, 1)
            }
        },
        //编辑
        changeState (row) {
            if(row.changeState !== -1) {
                row.changeType = row.changeType === 1 ? 1 : 2
                row.changeState = row.changeState === 1 ? 1 : 2
            }
        },
        //取消删除
        cancelDelete (row) {
            row.changeState = 2
            row.changeType = 2
        },
    }
}
</script>
<style lang='scss' scoped>
    ::v-deep .hide-icon{
        .el-table__expand-icon{
            display: none;
        }
    }
    ::v-deep.el-table__row{
        .cell{
            display: flex;
        }
        td:nth-child(6),td:nth-child(7),td:nth-child(8){
            .cell{
                justify-content: flex-end;
            }
        }
    }
</style>
